<template>
	<div>
		<div class="poster" id="poster" :style="{'background':'url('+data.banner+') center center no-repeat'}" ref="poster">
			<div class="title">
				{{title.title}}
			</div>
			<div class="rect"></div>
			<div class="photo">
				<img :src="data.relay_photo_image" alt=""/>
			</div>
			<div class="text" :style="{'color':data.rely_share_color}">{{text.text[0]}} <span :style="{'color':data.rely_share_num_color}">{{text.num}}</span> {{text.text[1]}}</div>
			<!-- <div class="border"></div> -->
			<div class="qrcode" >
				<img :src="linkImage" alt=""/>
			</div>
			<div class="dec">
				长按图片,识别二维码参与活动
			</div>
			<div class="sponsors">
				{{data.relay_sponsors}}
			</div>
			<!-- <div class="cpo">
				{{data.copyright}}
			</div> -->
		</div>
		
		<qrcode v-if="link!=null && !data.follow_account"  :text="link" @getLink="setLink"></qrcode>
	</div>
</template>

<script>
	
	import qrcode from '@/components/yz-qr/yz-qr.vue'
	import html2canvas from "html2canvas";
	export default {
		components:{qrcode},
		props: {
			title:{
				default:''
			},
			data: {
				default: {}
			},
			text:{
				default:()=>{
					return {
						text:['',''],
						num:0
					}
				}
			}
		},
		data() {
			return {
				link:null,
				linkImage:null,
				imgUrl:''
			}
		},
		methods:{
			//生成链接二维码
			setLink(val){
				this.linkImage = val
				this.$nextTick(()=>{
					this.toImage()
				})
			},
			toImage () {	
				let _this = this;
				let w = this.$refs.poster.offsetWidth - 1
				let h = this.$refs.poster.offsetHeight - 1
				html2canvas(document.getElementById("poster"), {
				  useCORS: true,
				  logging: false,
				  width: w,//设置canvas尺寸与所截图尺寸相同，防止白边
				  height: h,//防止白边
				}).then(function (canvas) {
				  _this.imgUrl = canvas.toDataURL("image/png"); // 获取海报的base64
				  _this.$emit('back',_this.imgUrl)
				}).catch(function (res) {
				  console.log("catch", res)
				});
			            // 宽高 * 2 并放大 2 倍 是为了防止图片模糊
			},
		},
		mounted() {
			//是否要引导
			if(!this.data.follow_account){
				this.link  = window.location.origin + '/plugin-view/?plugin='+this.$route.query.plugin+"&type="+this.$route.query.type+"&id="+uni.getStorageSync('actid')
			}else{
				this.linkImage = this.title.qrcode
				this.$nextTick(()=>{
					this.toImage()
				})
			}
			
		}
	}
</script>

<style lang="scss">
	.poster {
		box-shadow: 1rpx 10rpx 12rpx rgba(0, 0, 0, .56);
		position: fixed;
		top: -20000rpx;
		left: 75rpx;
		width: 600rpx;
		height: 1290rpx;
		background-size: cover!important;
		.title{
			position: absolute;
			top: 154rpx;
			left: 46rpx;
			width: 508rpx;
			text-align: center;
			font-size: 44rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 62rpx;
		}
		.rect{
			position: absolute;
			background: #fff;
			width: 508rpx;
			height: 439rpx;
			top: 265rpx;
			left: 46rpx;
		}
		.photo{
			line-height: 0;
			img{
				position: absolute;
				top: 279rpx;
				left: 60rpx;
				width: 480rpx;
				height: 411rpx;
				shadow: 0rpx 6rpx 20rpx rgba(0,0,0,0.3)
			}
			
		}
		.text{
				position: absolute;
				top: 756rpx;
				left: 76rpx;
				width: 448rpx;
				font-family: PingFang SC;
				line-height: 56rpx;
				font-weight: 400;
				font-size: 40rpx;
				text-align: center
		}
		.border{
				position: absolute;
				left: 0rpx;
				top: 895rpx;
				width: 600rpx;
				border-top: 1rpx #C5C5C5 dashed;
				z-index: 9;
		}
		.qrcode{
			line-height: 0;
			img{
				position: absolute;
				left: 46rpx;
				top: 917rpx;
				width: 180rpx;
				height: 180rpx;
			}
		}
		.dec{
			position: absolute;
			top: 963rpx;
			left: 246rpx;
			width: 278rpx;
			font-family: PingFang SC;
			line-height: 42rpx;
			font-weight: 400;
			font-size: 30rpx;
			text-align: left;
			color: #999999;
		}
		.sponsors{
			position: absolute;
			bottom: 100rpx;
			left: 46rpx;
			width: 508rpx;
			height: 42rpx;
			font-family: PingFang SC;
			line-height: 42rpx;
			font-weight: 400;
			font-size: 30rpx;
			text-align: left;
			color: #222;
		}
		.cpo{
			position: absolute;
			bottom: 58rpx;
			left: 46rpx;
			width: 508rpx;
			height: 42rpx;
			font-family: PingFang SC;
			line-height: 42rpx;
			font-weight: 400;
			font-size: 30rpx;
			text-align: left;
			color: #222;
		}
	}
</style>
